<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<title>登录</title>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<link rel="stylesheet" type="text/css" href="../font/iconfont.css" />
		<script src="../common_js/common_font.js"></script>
		<style type="text/css">
			* {
				margin: 0px;
				padding: 0px;
				box-sizing: border-box;
			}

			a {
				text-decoration: none;
			}

			html,
			body {
				width: 100%;
				height: 100%;
				font-size: 14px;
				background: #1F538F;
			}

			#login {
				width: 100%;
				height: 100%;
				/*border: 1px solid;*/
				overflow: auto;
				position: relative;
			}

			.loginalert {
				position: fixed;
				top: 50%;
				left: 50%;
				background: black;
				color: #fff;
				transform: translate(-50%, -50%);
				padding: 11px;
				border-radius: 16px;
				text-align: justify;
				display: none;
			}

			.content {
				/*border: 1px solid red;*/
				width: 100%;
				height: 350px;
				position: fixed;
				bottom: 30px;
			}
			/*矢量图标结束*/
			/*输入手机号样式开始*/

			.iphone,
			.password {
				width: 80%;
				height: 45px;
				line-height: 45px;
				margin: auto;
				vertical-align: middle;
				background: #FFFFFF;
				border-radius: 3px;
			}

			.password {
				margin-top: 20px;
			}

			.iphone>img,
			.password>img {
				width: 25px;
				height: 25px;
				vertical-align: middle;
				margin-left: 10px;
			}

			.iphone>input,
			.password>input {
				height: 100%;
				/*border: 1px solid red;*/
				background: #FEFFFD;
				border: 0;
				outline: 0;
				font-size: 16px;
			}
			/*输入手机号样式结束*/
			/*登录*/

			.loginbtn {
				width: 60%;
				height: 38px;
				color: #FFFFFF;
				font-size: 20px;
				margin: 50px 19%;
				background: #F5A525;
				text-align: center;
				line-height: 38px;
				border-radius: 6px;
				/*border: 1px solid yellow;*/
			}
			/*登录结束*/
			/*立即注册*/

			.login-p {
				text-align: center;
				margin-bottom: 60px;
			}

			.login-p>a {
				color: #D0EBF1;
			}
			/*立即注册结束*/
		</style>
	</head>

	<body>
		<!--总体div-->
		<div id="login">
			<!--内部div-->
			<div class="content">
				<!--输入手机号码-->
				<div class="iphone">
					<img src="../commonimg/手机号@2x.png" />
					<input type="text" id="phone_number" placeholder="请输入手机号" v-model="user_tel" />
				</div>
				<!--输入手机号码结束-->
				<!--请输入密码-->
				<div class="password">
					<img src="../commonimg/密码@2x.png" />
					<input type="password" id="user_password" placeholder="请输入密码" v-model="user_pwd" />
				</div>
				<!--输入密码结束-->
				<!--登录-->
				<!--<div class="loginbtn" v-on:click="login">-->
				<div class="loginbtn">
					登录
				</div>
				<!--登录结束-->
				<!--立即注册-->
				<p class="login-p">
					<a href="../Registered_account/registered_account.html">立即注册</a>
				</p>
				<!--立即注册结束-->
				<!--忘记密码-->
				<p class="login-p">
					<a href="../forget_password/forget_password.html">忘记密码</a>
				</p>
				<!--忘记密码结束-->
			</div>
			<div class="loginalert">
				<p></p>
			</div>
		</div>
		<!--总体div结束-->
		<!--点击登陆时的跳转-->
		<script src="../common_js/jquery-1.11.0.min.js"></script>
		<script src="../common_js/vue.js"></script>
		<script type="text/javascript">
			//  	点击登录时的跳转
			$(".loginbtn").on("click", function() {
				var user_telphone = $("#phone_number").val();
				var user_pwd = $("#user_password").val();
				$.ajax({
					type: "GET",
					url: "http://119.23.224.92/jiandao/user/login",
					async: true,
					data: {
						"user_tel": user_telphone,
						"user_pwd": user_pwd
					},

					success: function(data) {
						console.log(data);
						var jiexi_json = JSON.parse(data);
						if(jiexi_json.success == "8888") {
							console.log("登录成功");
							var nei_data = jiexi_json.data;
							console.log(nei_data.user);
							console.log(nei_data.token)
							var user = nei_data.user;
							console.log(user.id);
							var new_object = {
								"user_id":user.id,
								"user_token":nei_data.token
							}
//							stringify()将json对象转化为json字符串,
//                          parse()将json字符串转化为json对象

							window.localStorage.setItem("userid",JSON.stringify(new_object));
							//如果成功登录则直接跳到首页,登录成功后直接就把数据存到secssion中
							// location.href = "../second_star/second_star.html";
						};
//						得到sessionstorage的内容
//						var ss = window.localStorage.getItem("userid");
//						console.log(JSON.parse(ss));
						if(jiexi_json.success == "1028") {
							$('.loginalert').css('display', 'block')
								.find('p').text('手机号还未注册哦，请点击立即注册前往注册页面');
							setTimeout(function() {
								$('.loginalert').css('display', 'none');
							}, 2000);
						};
						if(jiexi_json.success == "1027") {
							console.log("手机号或密码不正确");
							$('.loginalert').css('display', 'block')
								.find('p').text('手机号或密码不正确');
							setTimeout(function() {
								$('.loginalert').css('display', 'none');
							}, 2000);
						}
					},
					error: function(err) {
						console.log("错误");
						console.log(err);
					}
				});
			});
		</script>
	</body>

</html>